<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>【原创】ThreeJsModelViewer三维模型查看器 | 大前端技术分享</title><meta name="author" content="凡尘"><meta name="copyright" content="凡尘"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="项目介绍 三维模型查看器!         Welcome to Vue_ThreeModelViewer 👋                              Vue_ThreeModelViewer 是一款功能强大的模型查看器项目，致力于提供一套简单方便、无限可能的原生 ThreeJs 在 Vue 项目中的封装与实现。技术栈以 threejs 和 Vue2.6 为主,对于模型预览的可">
<meta property="og:type" content="article">
<meta property="og:title" content="【原创】ThreeJsModelViewer三维模型查看器">
<meta property="og:url" content="http://example.com/posts/csjakjkse/index.html">
<meta property="og:site_name" content="大前端技术分享">
<meta property="og:description" content="项目介绍 三维模型查看器!         Welcome to Vue_ThreeModelViewer 👋                              Vue_ThreeModelViewer 是一款功能强大的模型查看器项目，致力于提供一套简单方便、无限可能的原生 ThreeJs 在 Vue 项目中的封装与实现。技术栈以 threejs 和 Vue2.6 为主,对于模型预览的可">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45b38343354480eb08f72a3f2f19082~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?">
<meta property="article:published_time" content="2023-03-03T09:04:04.175Z">
<meta property="article:modified_time" content="2023-03-03T09:39:57.528Z">
<meta property="article:author" content="凡尘">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="threejs">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45b38343354480eb08f72a3f2f19082~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?"><link rel="shortcut icon" href="/assets/img/favicon.png"><link rel="canonical" href="http://example.com/posts/csjakjkse/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: 'ca-pub-6311121231731422',
  enable_page_level_ads: 'true'
});</script><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '【原创】ThreeJsModelViewer三维模型查看器',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-03-03 17:39:57'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.2"><link rel="alternate" href="/atom.xml" title="大前端技术分享" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>const preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> { preloader.endLoading() })

if (false) {
  document.addEventListener('pjax:send', () => { preloader.initLoading() })
  document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/assets/img/logo.png" onerror="onerror=null;src='/assets/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">7</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">11</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-compass"></i><span> 文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-compass"></i><span> 项目</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/project/vue/"><i class="fa-fw fas fa-cog"></i><span> vue系列</span></a></li><li><a class="site-page child" href="/html/project/react/"><i class="fa-fw fas fa-cog"></i><span> react系列</span></a></li><li><a class="site-page child" href="/html/project/mobile/"><i class="fa-fw fas fa-cog"></i><span> 移动端系列</span></a></li><li><a class="site-page child" href="/html/project/visual/"><i class="fa-fw fas fa-cog"></i><span> 三维可视化</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-star"></i><span> 收藏</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/collect/development/"><i class="fa-fw fas fa-cog"></i><span> 开发</span></a></li><li><a class="site-page child" href="/html/collect/design/"><i class="fa-fw fas fa-cog"></i><span> 设计</span></a></li><li><a class="site-page child" href="/html/collect/tool/"><i class="fa-fw fas fa-cog"></i><span> 工具</span></a></li><li><a class="site-page child" href="/html/collect/live/"><i class="fa-fw fas fa-cog"></i><span> 生活</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fa fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li><li><a class="site-page child" href="/books/"><i class="fa-fw fas fa-book"></i><span> 读书</span></a></li><li><a class="site-page child" href="/bangumi/"><i class="fa-fw fas fa-tv"></i><span> 追番</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-heart"></i><span> 关于</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/about/"><i class="fa-fw fa fa-id-card"></i><span> 简历</span></a></li><li><a class="site-page child" href="/atom.xml"><i class="fa-fw fas fa-rss"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/html/messageboard/"><i class="fa-fw fas fa-comment-dots"></i><span> 留言</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45b38343354480eb08f72a3f2f19082~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?')"><nav id="nav"><span id="blog-info"><a href="/" title="大前端技术分享"><img class="site-icon" src= "" data-lazy-src="/assets/img/logo.png"/><span class="site-name">大前端技术分享</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-compass"></i><span> 文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-compass"></i><span> 项目</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/project/vue/"><i class="fa-fw fas fa-cog"></i><span> vue系列</span></a></li><li><a class="site-page child" href="/html/project/react/"><i class="fa-fw fas fa-cog"></i><span> react系列</span></a></li><li><a class="site-page child" href="/html/project/mobile/"><i class="fa-fw fas fa-cog"></i><span> 移动端系列</span></a></li><li><a class="site-page child" href="/html/project/visual/"><i class="fa-fw fas fa-cog"></i><span> 三维可视化</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-star"></i><span> 收藏</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/collect/development/"><i class="fa-fw fas fa-cog"></i><span> 开发</span></a></li><li><a class="site-page child" href="/html/collect/design/"><i class="fa-fw fas fa-cog"></i><span> 设计</span></a></li><li><a class="site-page child" href="/html/collect/tool/"><i class="fa-fw fas fa-cog"></i><span> 工具</span></a></li><li><a class="site-page child" href="/html/collect/live/"><i class="fa-fw fas fa-cog"></i><span> 生活</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fa fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li><li><a class="site-page child" href="/books/"><i class="fa-fw fas fa-book"></i><span> 读书</span></a></li><li><a class="site-page child" href="/bangumi/"><i class="fa-fw fas fa-tv"></i><span> 追番</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fa-fw fas fa-heart"></i><span> 关于</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/html/about/"><i class="fa-fw fa fa-id-card"></i><span> 简历</span></a></li><li><a class="site-page child" href="/atom.xml"><i class="fa-fw fas fa-rss"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/html/messageboard/"><i class="fa-fw fas fa-comment-dots"></i><span> 留言</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">【原创】ThreeJsModelViewer三维模型查看器</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-03-03T09:04:04.175Z" title="发表于 2023-03-03 17:04:04">2023-03-03</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-03-03T09:39:57.528Z" title="更新于 2023-03-03 17:39:57">2023-03-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E9%A1%B9%E7%9B%AE/">项目</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">537</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>2分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="【原创】ThreeJsModelViewer三维模型查看器"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="项目介绍"><a href="#项目介绍" class="headerlink" title="项目介绍"></a>项目介绍</h1><blockquote>
<p>三维模型查看器!</p>
</blockquote>
<p align="center">
    <img src= "" data-lazy-src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d83a86e294424d8eaedc8c7d3a457fd2~tplv-k3u1fbpfcp-watermark.image?" width="260" alt="threejs vue 三维模型查看器">
</p>
<h1 align="center">Welcome to Vue_ThreeModelViewer 👋</h1>
<p>
  <img alt="Version" src= "" data-lazy-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7db6abf9197c49ea97c6907a81caf35d~tplv-k3u1fbpfcp-zoom-1.image" />
  <a href="https://juejin.im/post/6864410873709592584/" rel="external nofollow noreferrer" target="_blank">
    <img alt="Documentation" src= "" data-lazy-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90733de7a5604cf7bf0c9ac17a4f61c6~tplv-k3u1fbpfcp-zoom-1.image" />
  </a>
  <a href="#" target="_blank">
    <img alt="license:GPL3.0" src= "" data-lazy-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4eb339c00174732823657ce33c77e88~tplv-k3u1fbpfcp-zoom-1.image" />
  </a>
</p>

<blockquote>
<p>Vue_ThreeModelViewer 是一款功能强大的模型查看器项目，致力于提供一套简单方便、无限可能的原生 ThreeJs 在 Vue 项目中的封装与实现。技术栈以 threejs 和 Vue2.6 为主,对于模型预览的可视化控件、工具后期会逐步增加和完善。</p>
</blockquote>
<blockquote>
<p>Vue_ThreeModelViewer is a powerful model viewer project that aims to provide a set of simple and convenient encapsulation and implementation of native ThreeJs in Vue projects. The technology stack is dominated by threejs and Vue2.6, and the visual controls and tools for model preview will be gradually increased and improved in the later stage.</p>
</blockquote>
<h3 id="项目地址"><a href="#项目地址" class="headerlink" title="项目地址"></a>项目地址</h3><h4 id="github地址：https-github-com-yanyufanchen-threejsmodelviewer"><a href="#github地址：https-github-com-yanyufanchen-threejsmodelviewer" class="headerlink" title="github地址：https://github.com/yanyufanchen/threejsmodelviewer"></a>github地址：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/yanyufanchen/threejsmodelviewer">https://github.com/yanyufanchen/threejsmodelviewer</a></h4><h4 id="gitee地址：https-gitee-com-yanyufanchen-threejsmodelviewer"><a href="#gitee地址：https-gitee-com-yanyufanchen-threejsmodelviewer" class="headerlink" title="gitee地址：https://gitee.com/yanyufanchen/threejsmodelviewer"></a>gitee地址：<a target="_blank" rel="noopener external nofollow noreferrer" href="https://gitee.com/yanyufanchen/threejsmodelviewer">https://gitee.com/yanyufanchen/threejsmodelviewer</a></h4><h3 id="🏠-Homepage"><a href="#🏠-Homepage" class="headerlink" title="🏠 Homepage"></a>🏠 <a target="_blank" rel="noopener external nofollow noreferrer" href="http://yanyufanchen.gitee.io/threejsmodelviewer">Homepage</a></h3><h3 id="视频教程-Video-tutorial-–待添加"><a href="#视频教程-Video-tutorial-–待添加" class="headerlink" title="视频教程 | Video tutorial –待添加"></a><a href="">视频教程 | Video tutorial –待添加</a></h3><table>
<thead>
<tr>
<th>主页 🏠(home)</th>
<th>演示 ✨(demo)</th>
<th>文档 📦(doc)</th>
<th>教程(tutorial)</th>
<th>wiki</th>
</tr>
</thead>
<tbody><tr>
<td><a target="_blank" rel="noopener external nofollow noreferrer" href="http://yanyufanchen.gitee.io/threejsmodelviewer">website</a></td>
<td><a target="_blank" rel="noopener external nofollow noreferrer" href="http://yanyufanchen.gitee.io/threejsmodelviewer">Demo</a></td>
<td><a href="./public/docs/textCourse.md">Document</a></td>
<td><a href="">视频&amp;Video</a></td>
<td><a href="">wiki</a></td>
</tr>
</tbody></table>
<h2 id="Author"><a href="#Author" class="headerlink" title="Author"></a>Author</h2><p>👤 <strong>凡尘</strong></p>
<ul>
<li>Website:</li>
<li>Github: <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/yanyufanchen">@yanyufanchen</a></li>
</ul>
<h2 id="声明"><a href="#声明" class="headerlink" title="声明"></a>声明</h2><p>未获得授权的情况下，禁止对该仓库代码进行反编译、分发等行为，否则将承担相应的法律后果。</p>
<h2 id="🤝-Contributing"><a href="#🤝-Contributing" class="headerlink" title="🤝 Contributing"></a>🤝 Contributing</h2><p>Contributions, issues and feature requests are welcome!<br />Feel free to check <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/yanyufanchen/ThreeJsModelViewer/issues">issues page</a>.</p>
<p>欢迎提供问题和功能需求, 如果大家有好的点子和优化建议, 也欢迎提 pr 参与我们的共建.</p>
<h2 id="Show-your-support"><a href="#Show-your-support" class="headerlink" title="Show your support"></a>Show your support</h2><p>Give a ⭐️ if this project helped you!<br>如果觉得项目还不错, 就点个 star 吧~</p>
<h3 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h3><ol>
<li><p>首页</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> 模型列表</li>
<li><input checked="" disabled="" type="checkbox"> 模型下载</li>
</ul>
</li>
<li><p>模型查看器</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> 模型预加载</li>
<li><input checked="" disabled="" type="checkbox"> 顶部工具栏</li>
<li><input checked="" disabled="" type="checkbox"> 右侧查看器控件面板</li>
</ul>
</li>
<li><p>数据支持</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> unicloud 云存储</li>
</ul>
</li>
</ol>
<h2 id="技术栈-The-technology-stack"><a href="#技术栈-The-technology-stack" class="headerlink" title="技术栈 | The technology stack"></a>技术栈 | The technology stack</h2><ul>
<li><strong>Vue2</strong> 前端主流框架(react,vue,angular)之一,更适合快速搭建和团队合作的应用</li>
<li><strong>sass</strong> css 预编译语言，轻松编写结构化分明的 css</li>
<li><strong>antd</strong> 地球人都知道的 UI 组件库</li>
<li><strong>unicloud</strong> 优秀的 serverless 云服务系统</li>
</ul>
<h2 id="Install-安装"><a href="#Install-安装" class="headerlink" title="Install(安装)"></a>Install(安装)</h2><ol>
<li>下载代码 | Download the code</li>
</ol>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">github</span><br><span class="line">git <span class="built_in">clone</span> https://github.com/yanyufanchen/ThreeJsModelViewer.git</span><br><span class="line">gitee</span><br><span class="line">git <span class="built_in">clone</span> https://gitee.com/yanyufanchen/ThreeJsModelViewer.git</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>进入项目目录 | Go to the project catalog</li>
</ol>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="built_in">cd</span> ./ThreeJsModelViewer</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>安装依赖包 | Install the dependency package</li>
</ol>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">yarn install</span><br><span class="line">or</span><br><span class="line">cnpm install</span><br></pre></td></tr></table></figure>

<h2 id="Usage"><a href="#Usage" class="headerlink" title="Usage"></a>Usage</h2><p>本地启动应用 | Launch the app locally</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">yarn serve</span><br><span class="line">or</span><br><span class="line">cnpm run serve</span><br></pre></td></tr></table></figure>

<h2 id="更新日志-Update-the-log"><a href="#更新日志-Update-the-log" class="headerlink" title="更新日志 | Update the log"></a>更新日志 | Update the log</h2><ol>
<li>优化模型加载后释放缓存</li>
</ol>
<h2 id="持续升级-Continuous-upgrades"><a href="#持续升级-Continuous-upgrades" class="headerlink" title="持续升级 | Continuous upgrades"></a>持续升级 | Continuous upgrades</h2><p>正在完善顶部工具栏，敬请期待…</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">凡尘</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/posts/csjakjkse/">http://example.com/posts/csjakjkse/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">大前端技术分享</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/vue/">vue</a><a class="post-meta__tags" href="/tags/threejs/">threejs</a></div><div class="post_share"><div class="social-share" data-image="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45b38343354480eb08f72a3f2f19082~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/posts/adsdsafc/" title="【原创】WUI云桌面系统"><img class="cover" src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69acd21462774eb5bb724268d0a613ce~tplv-k3u1fbpfcp-watermark.image?" onerror="onerror=null;src='/assets/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">【原创】WUI云桌面系统</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/adsdsafc/" title="【原创】WUI云桌面系统"><img class="cover" src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69acd21462774eb5bb724268d0a613ce~tplv-k3u1fbpfcp-watermark.image?" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-03-03</div><div class="title">【原创】WUI云桌面系统</div></div></a></div><div><a href="/posts/21cfbf15/" title="【原创】基于Uniapp和UniCloud开发的全栈博客项目3.0"><img class="cover" src= "" data-lazy-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9213dfdc9fdd4958b7f2439f068c8edf~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-03-03</div><div class="title">【原创】基于Uniapp和UniCloud开发的全栈博客项目3.0</div></div></a></div><div><a href="/posts/undefined/" title="【转载】如何封装一个高质量的表单通用组件？ - 掘金"><img class="cover" src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa0d64c2e4344210b451e9030c953d1a~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-03-02</div><div class="title">【转载】如何封装一个高质量的表单通用组件？ - 掘金</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="lv-container" data-id="city" data-uid="MTAyMC81ODA5NC8zNDU1Nw=="></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/assets/img/logo.png" onerror="this.onerror=null;this.src='/assets/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">凡尘</div><div class="author-info__description">真理无穷，一寸欢喜。</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">7</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">11</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div><a id="card-info-btn" target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/yanyufanchen"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/yanyufanchen" rel="external nofollow noreferrer" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:yanyufanchen@gmail.com" rel="external nofollow noreferrer" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://juejin.cn/user/3554079798734622" rel="external nofollow noreferrer" target="_blank" title="掘金"><i class="fa-duotone fa-address-card"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"><div id='ipInfo'></div><script src="/assets/js/getBrowserInfo.js"></script><script>function geoip(obj) {var address = obj.country === obj.city ? obj.city : obj.country + ' ' + obj.city; var addr = obj.city ? address : obj.country;document.getElementById("ipInfo").innerHTML = '访客地址：<i class="fas fa-map-marked"></i> <a target="_blank" rel="noopener external nofollow noreferrer" href="https://whatismyipaddress.com/ip/' + obj.ip + '">' + addr + '</a><br/>' + '访客 IP：<i class="fas fa-at"></i> <a target="_blank" rel="noopener external nofollow noreferrer" href="https://get.geojs.io/v1/ip/geo.js/">' + obj.ip + '</a><br>浏览器：<i class="fab fa-chrome"></i> <span style="color:#2196f3">' + getBrowserInfo() + '</span>';}</script><script src= "https://get.geojs.io/v1/ip/geo.js"></script></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.</span> <span class="toc-text">项目介绍</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">2.</span> <span class="toc-text">Welcome to Vue_ThreeModelViewer 👋</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E5%9C%B0%E5%9D%80"><span class="toc-number">2.0.1.</span> <span class="toc-text">项目地址</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#github%E5%9C%B0%E5%9D%80%EF%BC%9Ahttps-github-com-yanyufanchen-threejsmodelviewer"><span class="toc-number">2.0.1.1.</span> <span class="toc-text">github地址：https:&#x2F;&#x2F;github.com&#x2F;yanyufanchen&#x2F;threejsmodelviewer</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gitee%E5%9C%B0%E5%9D%80%EF%BC%9Ahttps-gitee-com-yanyufanchen-threejsmodelviewer"><span class="toc-number">2.0.1.2.</span> <span class="toc-text">gitee地址：https:&#x2F;&#x2F;gitee.com&#x2F;yanyufanchen&#x2F;threejsmodelviewer</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%F0%9F%8F%A0-Homepage"><span class="toc-number">2.0.2.</span> <span class="toc-text">🏠 Homepage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B-Video-tutorial-%E2%80%93%E5%BE%85%E6%B7%BB%E5%8A%A0"><span class="toc-number">2.0.3.</span> <span class="toc-text">视频教程 | Video tutorial –待添加</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Author"><span class="toc-number">2.1.</span> <span class="toc-text">Author</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E"><span class="toc-number">2.2.</span> <span class="toc-text">声明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%F0%9F%A4%9D-Contributing"><span class="toc-number">2.3.</span> <span class="toc-text">🤝 Contributing</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Show-your-support"><span class="toc-number">2.4.</span> <span class="toc-text">Show your support</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Features"><span class="toc-number">2.4.1.</span> <span class="toc-text">Features</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8A%80%E6%9C%AF%E6%A0%88-The-technology-stack"><span class="toc-number">2.5.</span> <span class="toc-text">技术栈 | The technology stack</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Install-%E5%AE%89%E8%A3%85"><span class="toc-number">2.6.</span> <span class="toc-text">Install(安装)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Usage"><span class="toc-number">2.7.</span> <span class="toc-text">Usage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97-Update-the-log"><span class="toc-number">2.8.</span> <span class="toc-text">更新日志 | Update the log</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%81%E7%BB%AD%E5%8D%87%E7%BA%A7-Continuous-upgrades"><span class="toc-number">2.9.</span> <span class="toc-text">持续升级 | Continuous upgrades</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/csjakjkse/" title="【原创】ThreeJsModelViewer三维模型查看器"><img src= "" data-lazy-src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45b38343354480eb08f72a3f2f19082~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?" onerror="this.onerror=null;this.src='/assets/img/404.jpg'" alt="【原创】ThreeJsModelViewer三维模型查看器"/></a><div class="content"><a class="title" href="/posts/csjakjkse/" title="【原创】ThreeJsModelViewer三维模型查看器">【原创】ThreeJsModelViewer三维模型查看器</a><time datetime="2023-03-03T09:04:04.175Z" title="发表于 2023-03-03 17:04:04">2023-03-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/adsdsafc/" title="【原创】WUI云桌面系统"><img src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69acd21462774eb5bb724268d0a613ce~tplv-k3u1fbpfcp-watermark.image?" onerror="this.onerror=null;this.src='/assets/img/404.jpg'" alt="【原创】WUI云桌面系统"/></a><div class="content"><a class="title" href="/posts/adsdsafc/" title="【原创】WUI云桌面系统">【原创】WUI云桌面系统</a><time datetime="2023-03-03T08:43:54.571Z" title="发表于 2023-03-03 16:43:54">2023-03-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/21cfbf15/" title="【原创】基于Uniapp和UniCloud开发的全栈博客项目3.0"><img src= "" data-lazy-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9213dfdc9fdd4958b7f2439f068c8edf~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?" onerror="this.onerror=null;this.src='/assets/img/404.jpg'" alt="【原创】基于Uniapp和UniCloud开发的全栈博客项目3.0"/></a><div class="content"><a class="title" href="/posts/21cfbf15/" title="【原创】基于Uniapp和UniCloud开发的全栈博客项目3.0">【原创】基于Uniapp和UniCloud开发的全栈博客项目3.0</a><time datetime="2023-03-03T07:54:11.519Z" title="发表于 2023-03-03 15:54:11">2023-03-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/undefined/" title="【转载】我在工作中是如何使用 git 的 - 掘金"><img src= "" data-lazy-src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8768f3a464a64596abbce522a8acd54f~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp" onerror="this.onerror=null;this.src='/assets/img/404.jpg'" alt="【转载】我在工作中是如何使用 git 的 - 掘金"/></a><div class="content"><a class="title" href="/posts/undefined/" title="【转载】我在工作中是如何使用 git 的 - 掘金">【转载】我在工作中是如何使用 git 的 - 掘金</a><time datetime="2023-03-02T02:20:09.596Z" title="发表于 2023-03-02 10:20:09">2023-03-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/undefined/" title="【转载】如何封装一个高质量的表单通用组件？ - 掘金"><img src= "" data-lazy-src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa0d64c2e4344210b451e9030c953d1a~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?" onerror="this.onerror=null;this.src='/assets/img/404.jpg'" alt="【转载】如何封装一个高质量的表单通用组件？ - 掘金"/></a><div class="content"><a class="title" href="/posts/undefined/" title="【转载】如何封装一个高质量的表单通用组件？ - 掘金">【转载】如何封装一个高质量的表单通用组件？ - 掘金</a><time datetime="2023-03-02T02:15:38.710Z" title="发表于 2023-03-02 10:15:38">2023-03-02</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45b38343354480eb08f72a3f2f19082~tplv-k3u1fbpfcp-zoom-crop-mark:1512:1512:1512:851.awebp?')"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 凡尘</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener external nofollow noreferrer" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"><script>function loadLivere () {
  if (typeof LivereTower === 'object') {
    window.LivereTower.init()
  }
  else {
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
    })(document, 'script');
  }
}

if ('Livere' === 'Livere' || !true) {
  if (true) btf.loadComment(document.getElementById('lv-container'), loadLivere)
  else loadLivere()
}
else {
  function loadOtherComment () {
    loadLivere()
  }
}</script></div><div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div><script src="https://cdn.jsdelivr.net/npm/live2d-widget@^3.1.3/lib/L2Dwidget.min.js"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/miku.model.json"},"display":{"position":"left","width":200,"height":400},"mobile":{"show":false},"log":false});</script></body></html>